<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习 vue</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			小结
			Vue模板语法有两大类：
			1、插值语法：
				功能：用于解析标签体的内容
				语法：{{x}}，x是js表达式，且可以读取到data中的所有属性,
				data对于插值语法是透明的，不需要再次绑定data
			2.指令语法：
				功能：用于解析标签(包括：标签属性，标签体内容，绑定事件。。。)
				举例：v-bind:href="x"/:href="x",x是js表达式，且可以读取
				到data中的所有属性data对于插值语法是透明的，不需要再次绑定data
				备注：Vue中有很多指令，且形式为：v-????，v-bind只是其中一个例子
		 -->
		<!-- 创建容器 -->
		<div id="root">
			<h1>插值语法</h1>
			<h3>hello,{{name}}</h3>
			<h1>指令语法</h1>
			<a v-bind:href="url">打开bilbli</a>
			<h1>指令语法</h1>
			<a :href="url.toUpperCase()" >打开bilbli</a>
			<!-- 加上v-bind：,href里的内容被当做表达式被执行，即可以存放js变量 ，
				当然v-bind可以省略，只加:即可-->
			<!-- 取出school里的url -->
			<h1>插值语法</h1>
			<h3>hello,{{school.url}}</h3>
			<h1>指令语法</h1>
			<a v-bind:href="school.url">打开bilbli</a>
			<h1>指令语法</h1>
			<a :href="school.url.toUpperCase()" >打开bilbli</a>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip=false//阻止生产提示
			
			//创建vue实例
			new Vue({
				el:'#root',//el用于绑定id为root的容器
				data:{//data存储数据，el指定容器
					name:'上硅谷',
					url:'https://www.bilibili.com',
					school:{
						url:"https://www.bilibili.com"
					}
				}
			})
		</script>
	</body>
</html>
